import React from 'react'

class ClassComponent extends React.Component {
  constructor () {
    super()
    this.state = {
      name: '丽珠',
      age: 20
    }
    this.changeInfo2 = this.changeInfo2.bind(this)
  }
  changeInfo = () => {
    this.setState({
      name: '李丽华',
      age: 22
    })
  }
  changeInfo2 () {
    this.setState({
      name: '张文',
      age: 24
    })
  }
  changeInfo3 = (e, name, age) => {
    this.setState({
      name: name,
      age: age
    })
  }
  render () {
    console.log(this)
    return (
      <div>
        class组件
        <p>
          姓名：{this.state.name} 年龄：{this.state.age}
        </p>
        <p>
          {/* 写法一:在构造器中用bind绑定this */}
          {/* <button onClick={this.changeInfo2.bind(this)}>change2</button> */}
          {/* 写法二 */}
          {/* <button onClick={()=>{this.changeInfo2}}>change2</button> */}
          {/* 写法三 */}
          <button onClick={this.changeInfo2}>change2</button>
          &nbsp;&nbsp;
          <button onClick={this.changeInfo}>change</button>
          &nbsp;&nbsp;
          <button
            onClick={e => {
              this.changeInfo3(e, '王磊', 23)
            }}
          >
            change3
          </button>
        </p>
      </div>
    )
  }
}

export default ClassComponent
